<!--
 * @Author: your name
 * @Date: 2021-11-30 08:40:19
 * @LastEditTime: 2021-12-04 09:38:08
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /carbon/src/components/echarts.vue
-->
<template>
  <div id="main" style="widht: 100vw; height: 100vh"></div>
</template>

<script>
import * as echarts from "echarts";
import getRandom from "@/utils/Random";
import initDate from "@/utils/initDate";

export default {
  data() {
    return { data: [] };
  },
  created() {
    this.data = [
      ["2000-06-05", 116],
      ["2000-06-06", 129],
      ["2000-06-07", 135],
      ["2000-06-08", 86],
      ["2000-06-09", 73],
      ["2000-06-10", 85],
      ["2000-06-11", 73],
      ["2000-06-12", 68],
      ["2000-06-13", 92],
      ["2000-06-14", 130],
      ["2000-06-15", 245],
      ["2000-06-16", 139],
      ["2000-06-17", 115],
      ["2000-06-18", 111],
      ["2000-06-19", 309],
      ["2000-06-20", 206],
      ["2000-06-21", 137],
      ["2000-06-22", 128],
      ["2000-06-23", 85],
      ["2000-06-24", 94],
      ["2000-06-25", 71],
      ["2000-06-26", 106],
      ["2000-06-27", 84],
      ["2000-06-28", 93],
      ["2000-06-29", 85],
      ["2000-06-30", 73],
      ["2000-07-01", 83],
      ["2000-07-02", 125],
      ["2000-07-03", 107],
      ["2000-07-04", 82],
      ["2000-07-05", 44],
      ["2000-07-06", 72],
      ["2000-07-07", 106],
      ["2000-07-08", 107],
      ["2000-07-09", 66],
      ["2000-07-10", 91],
      ["2000-07-11", 92],
      ["2000-07-12", 113],
      ["2000-07-13", 107],
      ["2000-07-14", 131],
      ["2000-07-15", 111],
      ["2000-07-16", 64],
      ["2000-07-17", 69],
      ["2000-07-18", 88],
      ["2000-07-19", 77],
      ["2000-07-20", 83],
      ["2000-07-21", 111],
      ["2000-07-22", 57],
      ["2000-07-23", 55],
      ["2000-07-24", 60],
    ];
  },
  mounted() {
    this.renderEcharts();
    this.addItem();
  },

  methods: {
    renderEcharts() {
      if (!document.getElementById("main")) {
        return;
      }
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      // prettier-ignore
      const dateList = this.data.map(function (item) {
      return item[0];
    });
      const valueList = this.data.map(function (item) {
        return item[1];
      });
      option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          }
        ],
        title: [
          {
            left: 'center',
            text: 'Gradient along the y axis'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            data: dateList
          }
        ],
        yAxis: [{}],
        grid: [
          {
            bottom: '60%'
          }
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList
          }
        ]
      };

      option && myChart.setOption(option);
    },
    addItem() {
      let i = 0;
      const timer = setInterval(() => {
        const result = initDate();
        let newArr = [result, getRandom(600, 0)];
        this.data.push(newArr);
        this.renderEcharts();
        i++;
        if (i == 50) {
          clearInterval(timer);
        }
      }, 300);
    },
  },
};
</script>

<style>
</style>
